<template>
    <div class="main">
        <el-button @click="readExcel" type="primary">ajax读取excel表格</el-button>
        <el-table :data="list" :border="true">
            <el-table-column prop="title" label="文章标题" width="280" />
            <el-table-column prop="litpic" label="文章图片地址" width="180" />
            <el-table-column prop="click" label="点击量" width="80" />
            <el-table-column prop="seo_description" label="文章描述" />
            <el-table-column prop="stock_count" label="收藏数" width="60" />
            <el-table-column prop="tempview" label="文章模板" width="120" />
            <el-table-column prop="add_time" label="发布时间" width="100" />
            <el-table-column prop="update_time" label="更新时间" width="100" />
        </el-table>
    </div>
</template>
<script>
import XLSX from "xlsx-style"
export default {
    data() {
        return {
            list: []
        }
    },
    methods: {
        // 参考文献：https://blog.csdn.net/Bole6666666/article/details/133002239
        readExcel() {
            const that=this
            const url = 'demo.xlsx';
            const oReq = new XMLHttpRequest();

            oReq.open("GET", url, true);
            oReq.responseType = "arraybuffer";

            oReq.onload = function (e) {
                const arraybuffer = oReq.response;
                const data = new Uint8Array(arraybuffer);
                const arr = new Array();
                for (let i = 0; i < data.length; ++i) {
                    arr[i] = String.fromCharCode(data[i]);
                }
                const bstr = arr.join("")
                const workbook = XLSX.read(bstr, { type: "binary" });
                console.log('读到的表格数据',workbook)
                const json=XLSX.utils.sheet_to_json(workbook.Sheets['我的第一个工作表'])
                console.log('这个是json吗',json)
                that.list=json
            }

            oReq.send();
        }
    }
}
</script>